<!DOCTYPE HTML>
<html>
	<head>
		<title>缓冲运动</title>
		<meta charset="utf-8">
		<style>
			#div1{
				width:200px;
				height:200px;
				background:red;
				position:absolute;
				top:50px;
				left: 0;
			}
			#div2{
				width:1px;
				height:300px;
				background: #ccc;
				position: absolute;
				top:0;
				left:300px;
			}
			#div3{
				width:1px;
				height:300px;
				background: #ccc;
				position: absolute;
				top:0;
				left:600px;			
			}
		</style>
		<script>
			var timer=null;
			function startMove(target)
			{
				var oDiv1=document.getElementById('div1');
				var speed=0;
				clearInterval(timer);
				timer=setInterval(function(){
					
						speed=(target-oDiv1.offsetLeft)/10;
						speed=speed>0?Math.ceil(speed):Math.floor(speed);
						oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
				},30);
			}
		</script>
	</head>
	<body>
	<input type="button" value="运动到300" onclick="startMove(300)">
	<input type="button" value="运动到600"onclick="startMove(600)">
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>